<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>会覆盖</p>
    </div> 
    <script>
         var login={//第一步
            template:'<h1>这是登录组件</h1>'
        }
    var vm=new Vue({
        el:'#app',
        data:{},
        methods:{},
        render:function(createElements){//第二步
            return createElements(login)
        }
        //createElements是一个方法，调用它，能够把指定的组件模版渲染为html结构
        //注意，这里return的结果，会替换页面中el指定的那个容器
        //（即虚拟把div删掉或则说覆盖掉，因此就算div里面有别的内容也不会显示到页面中）
        //区别01，02
        //01中的p标签能显示，02中的p标签被覆盖
        //一个app里面只能render一个组件，具有唯一性。components则可以装多个组件。
    });
    </script>
</body>
</html>